
<!DOCTYPE html>
<html>
<head>
<title>IT工程师后台管理</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport' />
<link href='css/core/bootstrap.css' media='all' rel='stylesheet' type='text/css' />
<link href='css/core/light-theme.css' id='color-settings-body-color' media='all' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/core/slicebox.css" />
<link rel="stylesheet" type="text/css" href="css/core/custom.css" />
<link href='css/base.css' media='all' rel='stylesheet' type='text/css' />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body class=''>
<header id="header">
</header>

<div id='wrapper'>
    <div id='main-nav-bg'></div>
    <nav class='' id='main-nav'>
        <div id="guide" class='navigation'>
        </div>
    </nav>
    <section id='content'>
        <div class='container-fluid'>
            <div class='row-fluid' id='content-wrapper'>
                <div class='span12 container'>
                    <div class='page-header'>
                        <h1 class='pull-left'>
                            <i class='icon-dashboard'></i>
                            <span>博创华宇教育管理</span>
                        </h1>
                    </div>
                    <div class='alert alert-info'>
                        IT工程师学习后台管理
                    </div>
                    <div class="wrapper">

                        <ul id="sb-slider" class="sb-slider">
                            <li>
                                <a href="http://www.cnblogs.com/lhb25/" target="_blank"><img src="images/1.jpg" alt="image1"/></a>
                                <div class="sb-description">
                                    <h3>Creative Lifesaver</h3>
                                </div>
                            </li>
                            <li>
                                <a href="http://www.cnblogs.com/lhb25/" target="_blank"><img src="images/2.jpg" alt="image2"/></a>
                                <div class="sb-description">
                                    <h3>Honest Entertainer</h3>
                                </div>
                            </li>
                            <li>
                                <a href="http://www.cnblogs.com/lhb25/" target="_blank"><img src="images/3.jpg" alt="image1"/></a>
                                <div class="sb-description">
                                    <h3>Brave Astronaut</h3>
                                </div>
                            </li>
                            <li>
                                <a href="http://www.cnblogs.com/lhb25/" target="_blank"><img src="images/4.jpg" alt="image1"/></a>
                                <div class="sb-description">
                                    <h3>Affectionate Decision Maker</h3>
                                </div>
                            </li>
                            <li>
                                <a href="http://www.cnblogs.com/lhb25/" target="_blank"><img src="images/5.jpg" alt="image1"/></a>
                                <div class="sb-description">
                                    <h3>Faithful Investor</h3>
                                </div>
                            </li>
                            <li>
                                <a href="http://www.cnblogs.com/lhb25/" target="_blank"><img src="images/6.jpg" alt="image1"/></a>
                                <div class="sb-description">
                                    <h3>Groundbreaking Artist</h3>
                                </div>
                            </li>
                            <li>
                                <a href="http://www.cnblogs.com/lhb25/" target="_blank"><img src="images/7.jpg" alt="image1"/></a>
                                <div class="sb-description">
                                    <h3>Selfless Philantropist</h3>
                                </div>
                            </li>
                        </ul>

                        <div id="shadow" class="shadow"></div>

                        <div id="nav-arrows" class="nav-arrows">
                            <a href="#">下一张</a>
                            <a href="#">上一张</a>
                        </div>
                        <div id="nav-dots" class="nav-dots">
                            <span class="nav-dot-current"></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                    </div>
                </div>
            </div>   
        </div>            
    </section>
</div>
<script src='js/core/jquery.min.js' type='text/javascript'></script>
<script src="js/core/modernizr.js" type="text/javascript"></script>
<script src="js/core/jquery.slicebox.js" type="text/javascript"></script>
<script src='js/core.js' type='text/javascript'></script>
<script src='js/res.js' type='text/javascript'></script>
<script src='js/init.js' type='text/javascript'></script>
<script src='js/index.js' type='text/javascript'></script>
</body>
<script type="text/javascript">
// $(function() {
//     var Page = (function(){
//         var $navArrows = $('#nav-arrows').hide(),
//         $navDots = $('#nav-dots').hide(),
//         $nav = $navDots.children('span'),
//         $shadow = $('#shadow').hide(),
//         slicebox = $('#sb-slider').slicebox({
//             onReady : function(){
//                 $navArrows.show();
//                 $navDots.show();
//                 $shadow.show();
//             },
//             onBeforeChange : function(pos){
//                 $nav.removeClass('nav-dot-current');
//                 $nav.eq(pos).addClass('nav-dot-current');
//             }
//         }),       
//         init = function(){
//             initEvents();              
//         },
//         initEvents = function(){
//             $navArrows.children(':first').on('click',function(){
//                 slicebox.next();
//                 return false;
//             });
//             $navArrows.children(':last').on('click',function(){                  
//                 slicebox.previous();
//                 return false;
//             });
//             $nav.each(function(i){    
//                 $(this).on('click',function(event){                   
//                     var $dot = $( this );                     
//                     if( !slicebox.isActive()) {
//                         $nav.removeClass('nav-dot-current');
//                         $dot.addClass('nav-dot-current');                       
//                     }                  
//                     slicebox.jump(i+1);
//                     return false;                
//                 });                
//             });
//         };
//         return {init:init};
//     })();
//     Page.init();
// });
$(function(){     
    var Page = (function(){
        var $navArrows = $('#nav-arrows').hide(),
        $navDots = $('#nav-dots').hide(),
        $nav = $navDots.children('span'),
        $shadow = $('#shadow').hide(),
            slicebox = $('#sb-slider').slicebox({
                onReady : function(){
                    $navArrows.show();
                    $navDots.show();
                    $shadow.show();
                },
                onBeforeChange : function(pos){
                $nav.removeClass('nav-dot-current');
                $nav.eq(pos).addClass('nav-dot-current');
                },
                orientation : 'r',
                cuboidsRandom : true,
                disperseFactor : 30
            }),
            init = function(){
                initEvents(); 
            },
            initEvents = function(){
                $navArrows.children(':first').on('click',function() {
                    slicebox.next();
                    return false;
                });
                $navArrows.children(':last').on('click',function() {
                    slicebox.previous();
                    return false;
                });
                $nav.each( function(i) {    
                    $(this).on('click',function(event) {                   
                        var $dot = $(this);                     
                        if(!slicebox.isActive()) {
                            $nav.removeClass('nav-dot-current');
                            $dot.addClass('nav-dot-current');                       
                        }                  
                        slicebox.jump(i+1);
                        return false;                
                    });                
                });
            };
            return {init:init};
    })();
    Page.init();
});
</script>
</html>